<template>
  <div class="demo">
    <div class="demo-title">预设宽度</div>
    <div class="demo-content">
      <Button type="primary" style="margin-right: 8px" @click="showDrawer('default')">
        Open Default Size (378px)
      </Button>
      <Button type="primary" @click="showDrawer('large')">Open Large Size (736px)</Button>
      <Drawer v-model:visible="open" title="Basic Drawer" :size="size" @close="onClose">
        <template #extra>
          <Button style="margin-right: 8px" @click="onClose">Cancel</Button>
          <Button type="primary" @click="onClose">Submit</Button>
        </template>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import type { DrawerProps } from '@sscd/drawer';
  import Drawer from '@sscd/drawer';
  const open = ref<boolean>(false);
  const size = ref<DrawerProps['size']>('default');
  const showDrawer = (val: DrawerProps['size']) => {
    size.value = val;
    open.value = true;
  };
  const onClose = () => {
    open.value = false;
  };
</script>
